<template>
  <div id="traffic-statistics" ref="interfaceQuery">
    <h1 class="w-title">接口流量统计</h1>
    <div class="traffic-statistics-con">
      <el-form :model="trafficStatisticsForm" ref="trafficStatisticsForm" size="medium" label-width="100px" class="form-style-traffic">
        <el-row :gutter="24">
          <el-col :span="8">
            <!-- <el-form-item label="时间">
              <el-select popper-class="zIndex-popper" v-model="trafficStatisticsForm.interfaceQueryTime" placeholder="请选择" @change="selectGetTime">
                <el-option label="请选择" value=""></el-option>
                <el-option label="一天" value="0"></el-option>
                <el-option label="三天" value="1"></el-option>
                <el-option label="一周" value="2"></el-option>
                <el-option label="一个月" value="3"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="开始日期" >
              <el-date-picker
                v-model="trafficStatisticsForm.beginDateQuery"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="年/月/日" @change="dateChageTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="trafficStatisticsForm.endDateQuery"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="年/月/日" @change="dateChageTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="所属模块">
              <el-select v-model="labelValue" @change="changeData" placeholder="请选择" popper-class="zIndex-popper">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in modelData" :key="item.moduleId" :label="item.moduleName" :value="item.moduleId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="API接口">
              <el-select v-model="trafficStatisticsForm.interfaceQueryFormAPI" placeholder="请选择" popper-class="zIndex-popper">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in info.interfaces" :key="item.interfaceId" :label="item.interfaceName" :value="item.interfaceId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="21">
          <!-- <el-col :span="7">
          <el-form-item label="开发者">
            <el-select popper-class="zIndex-popper" v-model="trafficStatisticsForm.interfaceQueryFormDeveloper" placeholder="请选择">
              <el-option label="请选择" value=""></el-option>
              <el-option v-for="item in info.devAccts" :key="item.devId" :label="item.devAcct" :value="item.devId"></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
          <!-- <el-col :span="7">
            <el-form-item label="应用">
              <el-select popper-class="zIndex-popper" v-model="trafficStatisticsForm.interfaceQueryFormaApply" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in info.devApps" :key="item.appId" :label="item.appName" :value="item.appId"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div class="footerbtnlist">
        <el-button type="primary" size="mini" @click="apiChart">接口访问量图表</el-button>
        <el-button type="primary" size="mini" @click="listInquiry">列表（查询）</el-button>
        <!--<el-button type="primary" size="small">导出表格</el-button>-->
      </div>
      <div v-if="listAndEcharsType">
        <el-table
          v-loading="loading"
          :data="apiListTableData"
          style="width: 100%">
          <el-table-column type="index" min-width="50"></el-table-column>
          <!-- <el-table-column
            prop="appName"
            label="应用名称"
            min-width="200">
          </el-table-column> -->
          <!-- <el-table-column
            prop="devAcct"
            label="开发者账户"
            min-width="180">
          </el-table-column> -->
          <el-table-column
            prop="interfaceName"
            label="接口名称"
            min-width="200">
          </el-table-column>
          <el-table-column
            prop="count"
            label="访问量"
            min-width="50">
          </el-table-column>
        </el-table>
        <div class="trafficpage">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="total, prev, pager, next"
            :total="pageData.total">
          </el-pagination>
        </div>
      </div>
      <div v-else>
        <v-echarts :xAxisData="xAxisData" :seriesData="seriesData" :echartsType="echartsType"></v-echarts>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  import VEcharts from '../../../tmPaas/mobileAnalysis/csEcharts'
  export default {
    name: 'traffic-statistics',
    components: {
      VEcharts
    },
    data () {
        return {
          loading: true,
          currentPage: 1, // 页数
          pageData: '', // 页数相关的参数
          apiListTableData: [], // 表格数据
          labelValue: '',
          trafficStatisticsForm: {
            beginDateQuery: null, // 开始时间
            endDateQuery: null, // 结束时间
            interfaceQueryTime: '', // 时间
            interfaceQueryFormDeveloper: '', // 开发者
            interfaceQueryFormaApply: '', // 应用
            interfaceQueryFormAPI: '' // API接口
          },
          info: '', // 开发者信息
          modelData: [],
          echartsType: 'line',
          xAxisData: [], // X轴数据
          seriesData: [], // 显示数据
          listAndEcharsType: true // 控制echarts还是列表
        }
    },
    methods: {
      dateChageTime () {
          this.trafficStatisticsForm.interfaceQueryTime = ''
      },
//      接口访问量图表
      apiChart () {
          // let beginTime = this.trafficStatisticsForm.beginDateQuery === null ? null : this.timecConversion(this.trafficStatisticsForm.beginDateQuery)
          let beginTime = this.trafficStatisticsForm.beginDateQuery === null ? null : this.trafficStatisticsForm.beginDateQuery
        // let endTime = this.trafficStatisticsForm.endDateQuery === null ? null : this.timecConversion(this.trafficStatisticsForm.endDateQuery)
        let endTime = this.trafficStatisticsForm.endDateQuery === null ? null : this.trafficStatisticsForm.endDateQuery
        let apiId = this.trafficStatisticsForm.interfaceQueryFormAPI
        let timeDifference = (new Date(endTime) - new Date(beginTime)) / 1000 / 60 / 60 / 24
        if (timeDifference > 31 || timeDifference < 1) {
          this.$message({
            showClose: true,
            message: '请选择正确的时间段且不超过一个月',
            type: 'warning'
          })
          return false
        }
        if (beginTime === null || endTime === null) {
          this.$message({
            showClose: true,
            message: '请选择时间段',
            type: 'warning'
          })
          return false
        }
        if (apiId === '') {
          this.$message({
            showClose: true,
            message: '请选择接口',
            type: 'warning'
          })
          return false
        }
        let params = {
          'BeginDate': beginTime,
          'EndDate': endTime,
          'interfaceId': apiId
        }
        this.listAndEcharsType = false
        ajax.post(api.LISTFLOWSTATDATAS, params).then(res => {
          let Xdata = []
          let Ydata = []
          for (let index in res) {
            Xdata.push(res[index].date)
            Ydata.push(res[index].number)
          }
          this.$nextTick(() => {
            this.xAxisData = Xdata
            this.seriesData = [{'data': Ydata}]
          })
        })
      },
//    获取开发者账户信息
      getInfo (value) {
        this.trafficStatisticsForm.interfaceQueryFormAPI = ''
        ajax.post(api.LISTINTERFACEE, {moduleId: value}).then(res => {
          this.info = res
        })
      },
      // 下拉框数据改变
      changeData (val) {
        this.getInfo(val)
      },
      // 查询所属模块
      getApiMoudel () {
        ajax.post(api.LIST_API_MODULE_NO_PAGES, {}).then(res => {
          this.modelData = res.list
        })
      },
//    接口流量统计列表
      countList (num = 1, pageSize = 10) {
        this.loading = true
        let params = {}
        params.BeginDate = this.trafficStatisticsForm.beginDateQuery === null ? null : this.trafficStatisticsForm.beginDateQuery
        params.EndDate = this.trafficStatisticsForm.endDateQuery === null ? null : this.trafficStatisticsForm.endDateQuery
        params.devId = this.trafficStatisticsForm.interfaceQueryFormDeveloper === '' ? null : this.trafficStatisticsForm.interfaceQueryFormDeveloper
        params.appId = this.trafficStatisticsForm.interfaceQueryFormaApply === '' ? null : this.trafficStatisticsForm.interfaceQueryFormaApply
        params.interfaceId = this.trafficStatisticsForm.interfaceQueryFormAPI === '' ? null : this.trafficStatisticsForm.interfaceQueryFormAPI
        ajax.post(api.LISTFLOWSTAT + '?pageNum=' + num + '&pageSize=' + pageSize, params, true).then(res => {
          this.pageData = res
          this.pageSize = res.pageSize
          this.apiListTableData = res.list
          this.currentPage = res.pageNum
          this.loading = false
        }).catch(res => {
          this.loading = false
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      },
//      列表查询
      listInquiry () {
        this.listAndEcharsType = true
        if (this.trafficStatisticsForm.beginDateQuery !== null && this.trafficStatisticsForm.endDateQuery !== null) {
          this.countList()
          return false
        }
        this.$message({
          showClose: true,
          message: '请完善日期',
          type: 'warning'
        })
      },
      // timecConversion (t) {
      //   let d = new Date(t)
      //   let datetime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + `00` + ':' + `00` + ':' + `00`
      //   return datetime
      // },
//    获取时间转换为 1 3 7 一月
      selectGetTime (val) {
//       获取当天日期
          let date = new Date(new Date(new Date().toLocaleDateString()).getTime())
          let month = date.getMonth()
          let year = date.getFullYear()
          let DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
          this.trafficStatisticsForm.endDateQuery = date
        switch (val) {
            case '0': // 一天
              this.trafficStatisticsForm.beginDateQuery = new Date(date.getTime() - 1 * 24 * 60 * 60 * 1000)
              break
            case '1': // 三天
             this.trafficStatisticsForm.beginDateQuery = new Date(date.getTime() - 3 * 24 * 60 * 60 * 1000)
            break
            case '2': // 一周
              this.trafficStatisticsForm.beginDateQuery = new Date(date.getTime() - 7 * 24 * 60 * 60 * 1000)
            break
            case '3': // 三月
              if (((month === 1) && (year % 4 === 0) && ((year % 100 !== 0) || (year % 400 === 0)))) {
                this.trafficStatisticsForm.beginDateQuery = new Date(date.getTime() - 29 * 24 * 60 * 60 * 1000)
              } else {
                this.trafficStatisticsForm.beginDateQuery = new Date(date.getTime() - (DAYS_IN_MONTH[date.getMonth()]) * 24 * 60 * 60 * 1000)
              }
            break
            default:
              this.trafficStatisticsForm.endDateQuery = null
              this.trafficStatisticsForm.beginDateQuery = null
            break
          }
        },
//      分页
      handleCurrentChange (val) {
        this.countList(val)
      }
    },
    mounted () {
      this.countList()
      this.getApiMoudel()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
 #traffic-statistics
  height 100%
  overflow hidden
  .w-title
    height 56px
    line-height 56px
  .el-input
    width 100% !important
  .traffic-statistics-con
    height calc(100% - 66px)
    overflow: auto
    overflow-x hidden
    // background #fff
    margin 10px
    // padding-top 10px
  .form-style-traffic
    background #ffffff
    padding-top 10px
    .el-select
      width 100%
  // .trafficpage
  //   margin-top 10px
  .footerbtnlist
    text-align right
    padding-right 20px
    background #ffffff
  .v-echarts
    /*margin-top 10px*/
    width 100%
    background #fff
    .echarts
      width 100%
    .echarts > div > canvas
      width 100% !important
</style>
